<template>
	<view class="Invitefriends">
		<!-- 顶部导航 -->
		<diyNavBar value='接单管理' :color="'none'" :fixed="true"></diyNavBar>
		<view class="head-nav"></view>
		<view class="btn" @click="$util.redirectTo('/pages/invitation/invitation')">
			<image src="../../static/img/in02.png" mode="widthFix"></image>
			<view class="b-title">生成专属推广码</view>
		</view>
		<view class="txt-box">
			<view class="tb-contetn">
				<view class="tbc-title">
					<image src="../../static/img/in03.png" mode="heightFix"></image>
					<text class="tbs-tips">邀请奖励</text>
					<image src="../../static/img/in04.png" mode="heightFix"></image>
				</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<text class="num">{{index + 1}}</text>、
					<text class="i-context">{{item.title}}</text>
					<text class="i-context" v-if="item.price">，<text class="i-hover">奖励您{{item.price}}元</text></text>
					<block v-else>
						<text class="i-context">游戏试玩分成</text>
						<text class="i-context">：<text
								class="i-hover">一级{{Number(parseFloat(item.num[0]).toFixed(2))}}%，二级{{ Number(parseFloat(item.num[1]).toFixed(2))}}%</text></text>
					</block>
				</view>
				<view class="item">
					<text class="num">{{list.length + 1}}</text>、
					<text class="i-context">完成任务</text>
					<text class="i-context" v-if="newList.num_task">
						，<text class="i-hover">分成{{newList.num_task[0]}}%</text>
						，<text class="i-hover">一级{{Number(parseFloat(newList.num_task[1]).toFixed(2))}}%</text>
						，<text class="i-hover">二级{{Number(parseFloat(newList.num_task[2]).toFixed(2))}}%</text>
					</text>
				</view>
			</view>
		</view>
		<uni-popup ref="centerPopup" type="center">
			<view class="p-box" >
				<image src="../../static/img/in05.png" mode="widthFix"></image>
				<view class="p-title">邀请最大获得{{parseFloat(price).toFixed(2)}}元</view>
				<text class="iconfont icon-jiufuqianbaoicon08" @click.stop="$refs.centerPopup.close()"></text>
				<view class="btn" v-if="uatype" @click="yaqing">马上邀请</view>
				<view class="btn" v-else @click="$util.redirectTo('/pages/invitation/invitation')">生成海报</view>
			</view>
		</uni-popup>
		<uni-popup ref="bottomPopup" type="bottom">
			<view class="b-box">
				<view class="item-box" @click="share(item)" v-for="(item,index) in shareList" :key="index">
					<view class="iconfont " :class="item.type"></view>
					<view class="i-title">{{item.title}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	export default {
		components: {
			diyNavBar
		},
		data() {
			return {
				image: '',
				list: [],
				shareList: [{
					type: 'icon-pengyouquan',
					title: '朋友圈',
					text: 'WXSceneTimeline',
					id: 1
				}, {
					type: 'icon-weixin',
					title: '微信好友',
					text: 'WXSceneSession',
					id: 2
				}],
				price: 0,
				newList: [],
				distribution: {},
				uatype:false
			}
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			this.$http.sendrequest('/member/createSystemPoster', {}, {
				sendrequest: true
			}).then(res => {
				if (res.code == 1) {
					this.image = res.data[0].image_url;
				}
			})
		},
		methods: {
			yaqing() {
				this.$refs.bottomPopup.open()
			},

			getData() {
				this.$http.sendrequest('/NoviceRecord/invitationrRwards').then(res => {
					res.data.invitation_rewards.forEach(item => {
						this.price += Number(item.price)
					})
					let arr = res.data.invitation_rewards
					this.newList = res.data.distribution;
					this.list = arr.concat(this.newList);

					let ua = uni.getSystemInfoSync().platform;
					if (/android/i.test(ua)) this.uatype = true;
					if (this.$refs.centerPopup) this.$refs.centerPopup.open();
				})
			},
			share(item) {
				let newImg = this.$http.newBaseUrl + this.image
				// #ifdef APP
				uni.share({
					provider: 'weixin',
					scene: item.text,
					type: 1,
					summary:`【ASRV任务】帮人忙，赚赏金！就来ASRV任务，复制链接，去浏览器中打开↓↓↓ ${'http://www.taojinzhuan1.com/h5/'}`,
					success: res => {
						this.$http.sendrequest('/NoviceRecord/SharingAdd', {
							id: 2,
							status: 1
						}, {
							tokenJudge: true
						}).then(res => {})
					},
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Invitefriends {
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		background-image: url('../../static/img/in01.png');
		padding-top: 30rpx;

		.btn {
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;

			.b-title {
				position: absolute;
				bottom: 120rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
		}

		.txt-box {
			min-height: 200rpx;
			max-height: 798rpx;
			margin: 0 35rpx;
			background: rgba(255, 255, 255, .2);
			border-radius: 20rpx;
			padding: 22rpx;

			.tb-contetn {
				width: 100%;
				min-height: 540rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 36rpx 24rpx;
				box-sizing: border-box;

				.tbc-title {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;

					image {
						height: 50rpx;
					}

					.tbs-tips {
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6C64;
					}
				}

				.item {
					display: flex;
					align-items: center;
					line-height: 1.8;
					font-size: 26rpx;

					.i-hover {
						color: #FF6C64;
					}
				}
			}
		}

		.p-box {
			min-width: 60vw;
			min-height: 20vh;
			border-radius: 20rpx;
			overflow: hidden;
			text-align: center;

			.p-title {
				width: 100%;
				font-size: 38rpx;
				color: #fff;
				font-weight: bold;
				position: absolute;
				top: 150rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			image {
				width: 100%;
			}

			.btn {
				position: absolute;
				bottom: 168rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 280rpx;
				height: 60rpx;
				background: #e3ff00;
				text-align: center;
				line-height: 60rpx;
				color: #eb6200;
				border-radius: 60rpx;
			}

			.icon-jiufuqianbaoicon08 {
				font-size: 38rpx;
				color: #fff;
			}
		}

		.b-box {
			min-height: 120rpx;
			display: flex;
			align-items: center;
			padding: 40rpx 150rpx;
			box-sizing: border-box;
			background: #fff;
			justify-content: center;

			.item-box {
				.i-title {
					margin-top: 30rpx;
					font-size: 28rpx;
					text-align: center;
				}

				.iconfont {
					font-size: 80rpx;
					color: #1dff19;
					margin: 0 60rpx;
				}
			}

		}
	}
</style>